{% extends 'oratk_app/master.html' %}
{% block tag_left %}
    {% include 'oratk_app/tag_left_user.html' %}
{% endblock %}
{% block title %}
    <title>ORATK</title>
{% endblock %}
{% block userinfo %}
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <form name="Form" role="search" action="/oratk_app/oratk_most_event_ajax" onsubmit="return validateForm()"
              target="_blank" method="POST">
            <h3 class="page-header">锁与等待事件</h3>
            <div class="navbar-form navbar-left">
                &nbsp 选择实例: &nbsp
                {#                <select class="form-control" name="conn_string" id="conn_string">#}
                <select class="selectpicker show-tick " style="width:450px" data-live-search="true" name="conn_string"
                        id="conn_string">

                    <option id="def">--请选择实例名--</option>
                    {% for i in instanceinfo_result %}
                        <option id="a">{{ i.dbname }}={{ i.conn_string }}</option>
                    {% endfor %}
                </select>
                <button type="button" class="btn btn-default" id="btSearch">查询(本页展示）</button>
                <button type="submit" class="btn btn-default" id="btSearch_new">查询(新页展示）</button>
                <div>&nbsp</div>
{#                <h3 class="page-header">执行结果</h3>#}
                    <h3 class="page-header">查询客户端信息</h3>
            <div id="args_detail">
                &nbsp 请输入sid: &nbsp
                <input type="text" style="width:220px;" name="sid"  id="sid"   class="form-control" placeholder="sid">
                &nbsp 请输入实例号(ins_id): &nbsp
                <input type="text" style="width:220px;" name="ins_id"   id="ins_id"   class="form-control" placeholder="默认为1">
                <div>&nbsp</div>
            </div>
                <div id="tab_detail_0"></div>
                <div id="tab_detail" table_count={{ table_count }}></div>
            </div>
        </form>
    </div>

    </div>

{% endblock %}

{% block script %}
    <script>
        //新页展示按钮执行前判断输入框是否有空值
        function validateForm() {
            var select_conn = $('#conn_string').find("option:checked").attr("id")
            if (select_conn == 'def') {
                alert('请选择实例')
                return false;
            }
        }

        //当点击"查询(本页展示)时，输入框值检查及ajax异步调用"
        $('#btSearch').click(function () {
            var select_conn = $('#conn_string').find("option:checked").attr("id")
            if (select_conn == 'def') {
                alert('请选择实例')
                return;
            }

            var sid = $('#sid').val()
            if  (sid.length > 0){

                //如果ins_i没有输入，默认值为1
                if ($('#ins_id').val().length > 0) {
                   var ins_id = $('#ins_id').val()
                }else {
                   var  ins_id = 1
                }
                //发送ajax请求
                $.ajax({
                    type: "POST",
                    data: {
                        'conn_string': $('#conn_string').val(),
                        'sid': $('#sid').val(),
                        'ins_id': ins_id,
                        'submit_id': 0
                    },
                    url: "/oratk_app/oratk_most_event_ajax", //后台处理函数的url
                    cache: false,
                    dataType: "html",
                    success: function (result) {
                        $("#tab_detail_0").html(result);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.status);
                        alert(XMLHttpRequest.readyState);
                        alert(textStatus);
                    },
                })
            }
            else {
                //发送ajax请求
                $.ajax({
                    type: "POST",
                    data: {
                        'conn_string': $('#conn_string').val(),
                        'sid': '',
                        'submit_id': 0
                    },
                    url: "/oratk_app/oratk_most_event_ajax", //后台处理函数的url
                    cache: false,
                    dataType: "html",
                    success: function (result) {
                        $("#tab_detail").html(result);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.status);
                        alert(XMLHttpRequest.readyState);
                        alert(textStatus);
                    },
                })

            }


        })

    </script>
<script>
//循环生成 table

</script>
{% endblock %}